<template>
  <div class="down">
    <div class="down_text">
      <div>
        <img :src="require('@/assets/images/other/icon.png')" alt="" />
      </div>
      <div class="yuying">声贝语音</div>
      <!-- <img src="../../public/img/down/logo.png" alt="" /> -->
      <p>寻找好声音&nbsp;结交真朋友</p>
      <img @click="downClick" :src="require('@/assets/images/down/joinroom.png')" alt="" />
      <div class="down_beian">
        <span>Copyright©2020-2021xunyin.All rights reserved.| </span>
        <a href="https://beian.miit.gov.cn/">鲁ICP备2021021117号-1 </a>
        <span>网络文化经营许可证编号：鲁网文（2021） 2573-044号</span>
      </div>
    </div>
    <div class="down_other" v-show="data.downShow" @click="down_otherClick">
      <img :src="require('@/assets/images/down/dian.png')" class="down_other_dian" />
      <img :src="require('@/assets/images/down/tips1.png')" class="down_other_shou" />
      <p>请在浏览器中打开下载</p>
    </div>
    <img class="bg_png" :src="require('@/assets/images/down/bg.png')" alt="" />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
interface Data {
    downShow: boolean,
    downimg: boolean
}
export default defineComponent({
  setup () {
    const data = reactive<Data>({
        downShow: false,
        downimg: true
    })
    if ((window as any).isAndroid) {
      data.downimg = true
    } else {
      data.downimg = false
    }
    const down_otherClick: () => void = () => {
      data.downShow = false
    }
    const downClick: () => void = () => {
      const u = navigator.userAgent;
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      const ua = (window as any).navigator.userAgent.toLowerCase();
      const isvx = ua.match(/MicroMessenger/i) === "micromessenger";
      if (isvx) {
        data.downShow = true;
      } else {
        if (isiOS) {
          window.location.href = "https://apps.apple.com/cn/app/id1535743948";
        } else {
          window.location.href =
            "https://img.xunyinjiaoyou.com/static/app/xunyin2.apk";
        }
      }
    }
    return {
        downClick,
        down_otherClick,
        data
    }
  }
})
</script>

<style lang="less" scoped>
@import './DownComponent.less';
</style>